<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        img {
            vertical-align: top;
        }

        .wrap {
            width: 400px;
            margin: 50px auto;
            position: relative;
        }

        .banner {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            position: relative;
            overflow: hidden;
        }

        .banner>ul {
            width: 2000px;
            overflow: hidden;
            position: absolute;
            left: 0;
        }

        .banner>ul>li {
            float: left;
            width: 400px;
            height: 400px;

        }

        .banner>ul>li>img {
            width: 100%;
        }

        .menu {
            position: absolute;
            right: 10px;
            bottom: 20px;
            padding: 5px 10px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 15px;
        }

        .menu>li {
            float: left;
            margin: 0 5px;
            width: 20px;
            height: 20px;
            background-color: grey;
            border-radius: 50%;
        }

        .menu .active {
            background: red;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="banner">
            <ul class="swipper">
                <li><img src="images/girlbig1.jpg" alt=""></li>
                <li><img src="images/girlbig2.jpg" alt=""></li>
                <li><img src="images/girlbig3.jpg" alt=""></li>
                <li><img src="images/girlbig4.jpg" alt=""></li>
                <li><img src="images/girlbig1.jpg" alt=""></li>
            </ul>
        </div>
        <ul class="menu">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
<script>
    var swipper = document.getElementsByClassName("swipper")[0];
    var liList = document.querySelectorAll(".menu>li");
    var index = 0;

    var delayTimer = setTimeout(startSwipper, 2000);


    for (let i = 0; i < liList.length; i++) {
        let li = liList[i];
        li.onmouseover = function () {
            clearTimeout(delayTimer);
            index = i;
            move();
        }
        li.onmouseout = function () {
            clearTimeout(delayTimer);
            delayTimer = setTimeout(startSwipper, 2000);
        }
    }


    function startSwipper() {
        index++;
        for (var i = 0; i < liList.length; i++) {
            liList[i].className = "";
        }
        console.log(index);
        liList[index == 4 ? 0 : index].className = "active";

        var speed = -20;
        var timer = setInterval(function () {
            var left = swipper.offsetLeft;
            var target = -400 * index;
            swipper.style.left = left + speed + "px";
            if (swipper.offsetLeft <= target) {
                swipper.style.left = target + "px";
                clearInterval(timer);
                if (index == 4) {
                    index = 0;
                    swipper.style.left = 0 + "px";
                }
                delayTimer = setTimeout(startSwipper, 2000);
            }
        }, 50);

    }

    function move() {
        for (var i = 0; i < liList.length; i++) {
            liList[i].className = "";
        }
        console.log(index);
        liList[index == 4 ? 0 : index].className = "active";
        var speed = -20;
        var timer = setInterval(function () {
            var left = swipper.offsetLeft;
            var target = -400 * index;
            if (target > left) {
                speed = 20;
            } else {
                speed = -20;
            }

            swipper.style.left = left + speed + "px";

            if (speed > 0) {
                if (swipper.offsetLeft >= target) {
                    swipper.style.left = target + "px";
                    clearInterval(timer);
                    if (index == 4) {
                        index = 0;
                        swipper.style.left = 0 + "px";
                    }
                }
            } else {
                if (swipper.offsetLeft <= target) {
                    swipper.style.left = target + "px";
                    clearInterval(timer);
                    if (index == 4) {
                        index = 0;
                        swipper.style.left = 0 + "px";
                    }
                }
            }
        }, 10);
    }

    // console.time("a");
    // for (var i = 0; i < 4; i++) {
    //     setTimeout(function () {
    //         console.log(i);
    //     }, 10);
    // }
    // console.timeEnd("a");


</script>

</html>